<template>
    <div>
    <div style="text-align: right; margin-right:20px;" v-if="toolbar">
        <common-button text="导出"
                       @click="exportList()">
        </common-button>
    </div>
    <el-table
            :data="data"
            v-loading.iTable="loading"
            :stripe="true"
            ref="mutipleTable"
            :height="height"
            :highlight-current-row="true"
            @selection-change="handleSelectionChange"
            @row-click="rowClick"
            border
            :show-header="showHeader"
            :tree-props="{children: 'children'}"
            :row-key="rowKey"
            header-row-class-name="tableHeader"
            tooltip-effect="dark"
            class="commonTable"
            style="width: 100%">
        <el-table-column v-if="mutiSelect" type="selection" style="width: 55px;">
        </el-table-column>

        <!--region 按钮操作组-->
        <el-table-column v-if="operates&&(operates.align == undefined || operates.align=='left')" label="操作"
                         align="center"
                         :width="operates.width">
            <template slot-scope="scope">
                <div class="operate-group">
                    <template v-for="(btn, key) in operates.list">
                        <div class="item" v-if="btn.show !== false && (btn.isShow == undefined || btn.isShow(scope.row))" :key='btn.id'>
                            <template v-if="btn.cls">
                                <image-button :cls="btn.cls" :disabled="btn.disabled" @click.stop="btn.method(key,scope.row)">
                                </image-button>
                            </template>
                            <template v-else>
                                <inner-button :type="btn.type" size="mini" :icon="btn.icon" :disabled="btn.disabled"
                                              :text="btn.label"
                                              :plain="btn.plain" @click.stop="btn.method(key,scope.row)">
                                </inner-button>
                            </template>
                        </div>
                    </template>
                </div>
            </template>
        </el-table-column>
        <!--endregion-->
        <el-table-column v-if="showIndex" :min-width="100" :width="100" type="index" label="序号">

        </el-table-column>
        <template v-for="(column, index) in columns">
            <el-table-column :prop="column.fieldName"
                             :key='column.propertyName'
                             v-if="!column.hidden"
                             :label="column.caption"
                             :fixed="column.fixed"
                             :align="column.textAlignment"
                             :sortable="column.allowSort"
                             :min-width="column.minWidth"
                             :width="column.width">
                <template slot-scope="scope">
                    <template v-if="!column.render">
                        <template v-if="column.formatter">
                            <!--<span v-html="column.formatter(scope.row, column)"></span>-->
                            <common-tooltip :tip="column.formatter(scope.row,column)">
                                <span v-html="column.formatter(scope.row,column)"></span>
                            </common-tooltip>
                        </template>
                        <template v-else>
                            <common-tooltip :tip="scope.row[(column.propertyName||column.fieldName)]">
                                <span v-html="scope.row[(column.propertyName||column.fieldName)]"></span>
                            </common-tooltip>
                        </template>
                    </template>
                    <template v-else>
                        <expand-dom :column="column" :row="scope.row" :render="column.render"
                                    :index="index"></expand-dom>
                    </template>
                </template>
            </el-table-column>
        </template>
        <!--region 按钮操作组-->
        <el-table-column v-if="operates&&(operates.align == undefined || operates.align=='right')" label="操作"
                         align="center" 
                         :width="operates.width">
            <template slot-scope="scope">
                <div class="operate-group">
                    <template v-for="(btn, key) in operates.list">
                        <div class="item" v-if="btn.show !== false && (btn.isShow == undefined || btn.isShow(scope.row))" :key='btn.id'>
                            <template v-if="btn.cls">
                                <image-button :cls="btn.cls" :disabled="btn.disabled" @click.stop="btn.method(key,scope.row,this)">
                                </image-button>
                            </template>
                            <template v-else>
                                <inner-button :type="btn.type" size="mini" :icon="btn.icon" :disabled="btn.disabled"
                                              :text="btn.label"
                                              :plain="btn.plain" @click.stop="btn.method(key,scope.row)">
                                </inner-button>
                            </template>
                        </div>
                    </template>
                </div>
            </template>
        </el-table-column>
        <!--endregion-->
    </el-table>
    </div>
</template>

<script>
    import Service from '../../services/common.service'
    import {exportExcel} from '../../../utils/excel/util'
    import moment from 'moment'

    export default {
        data() {
            return {
                tableData: [],
            }
        },
        components: {
            expandDom: {
                functional: true,
                props: {
                    row: Object,
                    render: Function,
                    index: Number,
                    column: {
                        type: Object,
                        default: null
                    }
                },
                render: (h, ctx) => {
                    const params = {
                        row: ctx.props.row,
                        index: ctx.props.index
                    }
                    if (ctx.props.column) params.column = ctx.props.column
                    return ctx.props.render(h, params)
                }
            }
        },
        mounted() {

        },
        created: function () {
        },
        methods: {
            handleSelectionChange(val) {
                this.multipleSelection = val
                this.$emit('selection-change', val)
            },

            rowClick(row, column, event) {
                this.$emit('rowClick', row, column, event)
            },

            setCurrentRow(row){
                this.$refs.mutipleTable.setCurrentRow(row);
            },

            exportList(fileName) {
                const me = this;
                if (!fileName) {
                    fileName = me.exportFileName;
                }
                let data = JSON.parse(JSON.stringify(me.data));
                for(let col of me.columns) {
                    if(col.formatter) {
                        for (let item of data) {
                            item[col.propertyName] = col.formatter(item);
                        }
                    }
                }
                exportExcel(me.columns, data, fileName);
            },

        },
        props: {
            data: {
                type: Array,
                default: function () {
                    return [];
                }
            },

            columns: {
                type: Array,
                default: []
            },
            showHeader:{
                type: Boolean,
                default: true
            },
            mutiSelect: false,

            operates: {},

            height: Number,

            rowKey: {
                type: String,
                default: 'id'
            },
            loading: {
                type: Boolean,
                default: false
            },

            showIndex:{
                type: Boolean,
                default: false
            },
            toolbar: {
                type: Boolean,
                default: false
            },
            /*options: {
                type: Object,
                default: {
                    stripe: false, // 是否为斑马纹 table
                    highlightCurrentRow: false // 是否要高亮当前行
                },
            }*/
        },
    }
</script>
<style lang="scss" scoped>
    /*.commonTable {
        margin-top: 3px;
        td, th{
            padding: 4px 0;
            text-align: center;
        }
        td{
            font-size: 0.875rem;
            color: #333;
        }
        .tableHeader th{
            background-color: #205193;
            color: #fff;
            padding: 5px 0;
            text-align: center;
            border-right: 1px solid #EBEEF5 !important;
        }
    }*/
</style>
